<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/html/reset.css">
    <style>
        .tishi {
            width: 200px;
            margin: 200px auto;
            border: 1px solid #ccc;
            position: relative;
            /* display: block; */
        }

        .tishi h2 {
            margin: 5px 5px;
            font-weight: normal;
            font-size: 18px;
        }

        .tishi p {
            text-align: center;
            line-height: 50px;
        }

        .div {
            position: absolute;
            top: 0;
            right: 5px;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>

<body>
    <button class="shanchu">删除</button>
    <button class="denglu">登录</button>

    <!-- <div class="tishi"> -->
    <!-- <h2>温馨提示</h2>
        <p>你没有权限删除</p>
        <div class="div"><span>X</span></div> -->
    <!-- </div> -->

    <script>

        function Modal(title = '', message = '') {
            this.modalBox = document.createElement('div')
            this.modalBox.className = 'tishi'
            this.modalBox.innerHTML = `
            <h2>${title}</h2>
            <p>${message}</p>
            <div class="div"><span>X</span></div>
           `
            console.log(this.modalBox);
        }
        // new Modal('温馨提示', '你没有权限删除')
        // new Modal('友情提示', '你还没有注册账号')

        // 给构造函数原型对象挂载open方法 共享
        Modal.prototype.open = function () {
            const boxs = document.querySelector('.tishi')
            // 中断运算 如果有boxs这个盒子就删除
            boxs && boxs.remove()
            document.body.append(this.modalBox)

            this.modalBox.querySelector('.div span').addEventListener('click', () => {
                this.colse()
            })

        }

        //删除方法
        Modal.prototype.colse = function () {
            this.modalBox.remove()
        }

        document.querySelector('.shanchu').addEventListener('click', () => {
            const del = new Modal('温馨提示', '你没有权限删除')
            del.open()
        })

        document.querySelector('.denglu').addEventListener('click', () => {
            const logs = new Modal('友情提示', '你还没有注册账号')
            logs.open()
        })


    </script>
</body>

</html>